<template>
	<div>
		<div class="activitiesOnePro" v-if="dataList.length > 0">
			<banner v-if="productdata.length>1" style="width:100%; height: 100%; position:relative;" :bounce="true">
				<ul class="proul">
					<li v-for="(val,index) in productdata" class="proulli" :key="index + 'proulli'">
						<active-item :buttonActive="buttonActive.bind(this,val)" :itemType="OneproductStyle" :detail="val"></active-item>
					</li>
				</ul>
				<div style="clear: both;"></div>
			</banner>
			<div v-if="productdata.length==1">
				<active-item v-for="(val,index) in productdata" :buttonActive="buttonActive.bind(this,val)" :itemType="OneproductStyle" :detail="val" :key="index + 'OneproductStyle'"></active-item>
				<div style="clear: both;"></div>
			</div>
		</div>
		<div v-if="dataList.length==0 && env === 'edit'" style="height: 2.5rem;line-height: 2.5rem;">请配置商品数据</div>
	</div>
</template>

<script>
	import { mapMutations } from "vuex";
	import Banner from '../../real-components/BannerScroll';
	import { queryGoodsList } from '@/utils/ReturnAxios'
	import ActiveItem from '../ActiveItem'
	import { getPageNameOrVirtualPageName } from "../../utils/getPageName";
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => []
			},
			config: {
				type: Object,
				default: ()=>{}
			},
			part:{
				type:Number,
				default:1
			}
		},
		data() {
			return {
				codeList: [],
				productdata: [],
				isOnLoad: true,
			}
		},
		components: {
			ActiveItem,
			Banner
		},
		methods: {
			...mapMutations('xxy', [
				"setstoptouch"
			]),
			goodsCodearrey() {
				this.codeList = []
				this.productdata = []
				if(this.dataList.length == 0) {
					return
				}
				if(this.dataList && this.dataList.length > 0) {
					for(var i = 0; i < this.dataList.length; i++) {
						this.productdata.push(this.dataList[i].goodsNewVO)
					}
					this.getdetaildata()
				}
			},
			async queryDetail() {
				this.isOnLoad = true
				var goodscodeList = this.codeList
				if(goodscodeList.length == 0) {
					return
				}
				var config = {
					goodscodeList: goodscodeList
				}
				var res = await queryGoodsList(config)
				res = res.data
				this.productdata = res.data[0]
				this.isOnLoad = false
				this.getdetaildata()
				if(!res.returnCode) {
					return
				}
			},
			getdetaildata() {
				for(var i = 0; i < this.dataList.length; i++) {
					for(var j = 0; j < this.productdata.length; j++) {
						if(this.dataList[i].goodsCode == this.productdata[j].goodsCode) {
							this.productdata[j].mainPic = this.dataList[i].publicityPicture
							this.productdata[j].regularTypeLabel = this.dataList[i].relTitle
						}
					}
				}
			},
			buttonActive(val) {
				this.$router.push({
					path: 'detail?code=' + val.goodsCode
				})
			}
		},
		computed: {
			pageName() {
				return getPageNameOrVirtualPageName();
			},
			OneproductStyle() {
				if(this.config.id) {
					if(parseInt(this.getCurrentVDONew(this.config.id, this.part).config.OneproductStyle) == 0) {
						return 'F';
					} else if(parseInt(this.getCurrentVDONew(this.config.id, this.part).config.OneproductStyle) == 1) {
						return 'J';
					}

				}
			},
			env() {
				return window.environment; // 获取是否是编辑状态
			},
		},

		watch: {
			dataList(val) {
				// console.log("this.dataList", val);
				this.goodsCodearrey()
			},
		},
		mounted() {
			// console.log("this.dataList", this.dataList);
			this.goodsCodearrey();
		},
	}
</script>

<style>
	.activitiesOnePro {
		padding: 0.75rem;
	}
	
	.activitiesOnePro .proul {
		float: left;
		display: flex;
		min-width: 100%;
		position: relative;
	}
	
	.activitiesOnePro .proul .proulli {
		width: 17.25rem;
		margin: 0rem 0.1rem;
	}
	/*一个商品的样式*/
	
	.activitiesOnePro .prouldiv {
		display: flex;
		min-width: 100%;
		position: relative;
	}
	
	.activitiesOnePro .prouldiv .proulli {
		width: 17.25rem;
		margin: 0rem 0.1rem;
	}
</style>